<script setup>
import Filter from '@/components/filter/index.vue';

const clickEvent = (event) => {
  const zoom = document.documentElement.clientWidth / 2127;
  const { left, top } = event.target.getBoundingClientRect();
  const offsetParent = event.target.offsetParent;
  const { left: offsetParentLeft, top: offsetParentTop } =
    offsetParent.getBoundingClientRect();
  console.log(left, top, offsetParentLeft, offsetParentTop, zoom);
};
</script>

<template>
  <h3>首页</h3>

  <!-- <Filter />

  <div class="container">
    <div class="box">
      <div class="flex-box">
        <div class="left">
          <div v-for="n in 10" :key="n" class="item">
            测试文本-测试文本-测试文本{{ n }}
          </div>
        </div>
        <div class="center">
          <div v-for="n in 10" :key="n" class="item" @click="clickEvent">
            测试文本-测试文本-测试文本{{ n }}
          </div>
        </div>
        <div class="right">
          <div v-for="n in 10" :key="n" class="item">
            测试文本-测试文本-测试文本{{ n }}
          </div>
        </div>
      </div>
    </div> 
  </div>-->
</template>

<style scoped>
.container {
  margin-top: 20px;

  .box {
    position: relative;

    .flex-box {
      display: flex;
      column-gap: 20px;

      .left {
        border: 1px solid #999;
        padding: 10px;
      }
      .center {
        border: 1px solid #999;
        padding: 10px;
      }
      .right {
        border: 1px solid #999;
        padding: 10px;
      }

      .item {
        padding: 10px 5px;
      }
    }
  }
}
</style>
